<template>
  <div class="home">
    <div class="home-logo">
      <img src="../../assets/svg/logo.svg" width="200"  />
    </div>
    <div class="home-tool">
      <Row class-name="row">
        <i-col span="8" class-name="item" v-for="(item, key) in tool" :key="key">
          <router-link :to="item.path">
            <img :src="item.imgUrl" height="60" width="100%">
            <span class="toolName">{{item.text}}</span>
          </router-link>
        </i-col>
      </Row>
    </div>
    <c-footer></c-footer>
  </div>
</template>
<script>
  import CFooter from '../../components/Footer.vue'
  export default {
    components: {
      CFooter
    },
    data () {
      return {
        tool: [
          {
            text: '现场签到',
            path: '/onlineSign',
            imgUrl: require('../../assets/svg/sign.svg')
          },
          {
            text: '工作日志',
            path: '/workLog',
            imgUrl: require('../../assets/svg/engineeringLog.svg')
          },
          {
            text: '会议纪要',
            path: '/meet',
            imgUrl: require('../../assets/svg/meetingMinutes.svg')
          }
        ]
      }
    }
  }
</script>
<style lang="scss">
  @import '../../assets/style/common.scss';
  .home-logo {
    padding-top: px2rem(70px);
    height: px2rem(150px);
    background: #5fc2c7;
  }
  .item {
    text-align: center;
    height: px2rem(250px);

    .toolName {
      color: #000;
    }
  }
  .home-tool{
    margin-top: px2rem(25px);
  }
</style>

